<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<%@include file="../common.jsp" %>
<html>
<head>
    <title>Title</title>
    <%--引入 echarts.js--%>
    <script src="${pageContext.request.contextPath}/static/echarts/echarts.js"></script>
</head>
<body>
<%--头部工具栏--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger " lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<%--行内工具栏--%>
<script type="text/html" id="rowBarDemo">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="sel">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="details">查看详情</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<%--模糊查询--%>
<form class="layui-form" action="" style="margin-top: 10px">
    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-inline">
            <input type="text" name="name" placeholder="请输入姓名" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">测试计划ID</label>
        <%--编辑下拉--%>
        <div class="layui-inline" style="width: 235px;">
            <select placeholder="请选择ID" id="planId" name="testPlanId"></select>
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-inline">
            <button class="layui-btn" lay-filter="formDemo" lay-submit>查询</button>
            <button type="reset" lay-submit class="layui-btn layui-btn-primary" id="myButton">重置</button>
        </div>
    </div>
</form>
<style>
    #show {
        margin: auto;
        background: orange;
        font-family: 华文行楷;
        font-size: 30px;
    }

    #bb {
        width: 200px;
        height: 80px;
        margin: auto;
        line-height: 80px;
    }

    #result {
        width: 470px;
        height: 90px;
        margin: auto;
        line-height: 80px;
    }
    #detailsTable{
        width: 500px;
        height: auto;
        margin: auto;
    }
</style>
<%--饼图--%>
<div id="show" style="width: 100%;height: 100%; display: none;">
    <div id="bb">SAS测试结果</div>
    <div id="result"></div>
    <div style="width: 100%;height: 350px;" id="results"></div>
</div>
<table id="demo" lay-filter="test"></table>
<div class="box" id="detailsss" style="display:none;width: auto">
    <table id="demo1" lay-filter="details" align="center"></table>
</div>
</body>
<script type="text/html" id="positiveScore"></script>
<script>
    layui.config({
        version: 1,
        base: 'echarts/'
    }).use(['element', 'echarts', 'carousel', 'table', 'jquery', 'form'], function () {
        var element = layui.element,
            $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            carousel = layui.carousel,
            echarts = layui.echarts;

        //第一个实例
        var myTable = table.render({
            elem: '#demo'
            , height: 430
            , url: '${pageContext.request.contextPath}/viewTestResultSas/queryResult.do' //数据接口
            , page: true
            , limit: 5
            , limits: [5, 10, 15, 20, 25, 30, 50, 100]
            , toolbar: '#barDemo'
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 120, sort: true}
                    , {field: 'name', title: '姓名', width: 120, sort: true}
                    , {field: 'phone', title: '电话', width: 120, sort: true}
                    , {field: 'createTime', title: '测试时间', width: 120, sort: true}
                    , {field: 'forward', title: '正向得分', width: 120, templet: '#positiveScore'}
                    , {field: 'inversion', title: '反向得分', width: 120}
                    , {field: 'testPlanId', title: '测试计划ID', width: 120, hide: true}
                    , {field: 'testName', title: '测试名称', width: 120}
                    , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#rowBarDemo'}

                ]
            ]
        })
        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('demo', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });
        });
        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //定义一个数组，封装所有的id
                        var ids = [];
                        //循环所有选中的行
                        for (let i = 0; i < data.length; i++) {
                            ids[i] = data[i].id;
                        }
                        layer.confirm('真的删除行么', function (index) {
                            //去后台批量删除数据
                            $.ajax({
                                url: "${pageContext.request.contextPath}/viewTestResultSas/delete.do",
                                type: "POST",
                                dataType: "JSON",
                                data: {id: ids.join(",")},
                                success: function (data) {
                                    if (data.code == 0) {
                                        //关闭对话框
                                        layer.closeAll(); //疯狂模式，关闭所有层
                                        //刷新表格数据
                                        table.reload('demo', {
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                        });

                                    }
                                    layer.msg(data.msg);
                                }

                            });
                        });
                    }
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            console.log(data);
            var name = data.name;
            var  question =  data.question;
            if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //去后台批量删除数据
                    $.ajax({
                        url: "${pageContext.request.contextPath}/viewTestResultSas/delete.do",
                        type: "POST",
                        dataType: "JSON",
                        data: {id: data.id},
                        success: function (data) {
                            if (data.code == 0) {
                                //关闭对话框
                                layer.closeAll(); //疯狂模式，关闭所有层
                                //刷新表格数据
                                table.reload('demo');

                            }
                            layer.msg(data.msg);
                        }

                    });
                });
            } else if (layEvent === 'details') {
                layer.open({
                    title: '查看详情',
                    type: 1,
                    content: $('#detailsss'),
                    area:['500px','500px'],
                })
                table.render({
                    elem: '#demo1',
                    url: "${pageContext.request.contextPath}/viewTestResultSas/showDetails.do?testerId="+data.id,
                    cols: [
                    [ //表头
                        {field: 'id', title: 'ID', width: 120, sort: true}
                        , {field: 'question', title: '题目', width: 260}
                        , {field: 'answer', title: '答案', width: 120}
                    ]
                ]

                })
            } else if (layEvent === 'sel') {
                layer.open({
                    title: '焦虑测试结果',
                    type: 1,
                    content: $('#show'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    area: ['550px', '550px']

                });
                $.ajax({
                    url: "${pageContext.request.contextPath}/viewTestResultSas/queryResultById.do",
                    type: "post",
                    dataType: "json",
                    data: {id: data.id},
                    success: function (data) {
                        var forward = data.data.forward;
                        var inversion = data.data.inversion;
                        var myChart = echarts.init(document.getElementById('results'));
                        var score = Math.round((forward + inversion) * 1.25);
                        var string = "";
                        if (score < 50) {
                            string = name + ",您的测试结果为无焦虑症状"
                        } else if (score <= 60) {
                            string = name + ",您的测试结果为轻度焦虑"
                        } else if (score <= 70) {
                            string = name + ",您的测试结果为中度焦虑"
                        } else if (score > 70) {
                            string = name + ",您的测试结果为重度焦虑"
                        }
                        $("#result").html(string)
                        var option = {
                            title: {
                                text: 'Sas焦虑测试',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            series: [
                                {
                                    name: 'Sas性格占比',
                                    type: 'pie',
                                    radius: '70%',
                                    data: [
                                        {value: forward, name: '正向题得分', itemStyle: {color: '#c51313'}},
                                        {value: inversion, name: '反向题得分', itemStyle: {color: '#1061ba'}},
                                    ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                })
            }
        });
        <!--提交条件查询-->
        $.ajax({
            url: "${pageContext.request.contextPath}/viewTestResultSas/pullSas.do",
            type: "POST",
            dataType: "JSON",
            success: function (ret) {
                if (ret.code == 0) {
                    var htmlStr = "<option value=''>请选择ID</option>";
                    for (let i = 0; i < ret.data.length; i++) {
                        htmlStr += "<option value=" + ret.data[i].testPlanId + ">测试ID：" + ret.data[i].testPlanId + "</option>"
                    }
                    $("#planId").html(htmlStr);
                    //重新渲染表单
                    layui.use('form', function () {
                        form.render('select');
                    })
                }
            }
        });

        form.on('submit(formDemo)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //提交表单数据
            myTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    name: data.field.name,
                    testPlanId: data.field.testPlanId
                }
                ,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        /**
         * 重置
         */
        $("#myButton").click(function () {
            myTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    name: "",
                    testPlanId: ""
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    })
</script>
</html>
